<template>
  <div class="xscroll_box">
    <div class="xscroll_title">
      <div>
        <span class="iconfont">&#xe940;</span>
        <span>本周热门榜单</span>
      </div>
      <div>
        <span>全部榜单</span>
        <span class="iconfont">&#xe60a;</span>
      </div>
    </div>
    <!-- 下面横向滑动 -->
    <div class="sliding_box">
      <div class="sliding_item" v-for="(item,index) in hotlist" :key="index">
        <div class="sliding_item_img"><img :src="item.imgurl" alt="" width="100%">
        </div>
        <div class="sliding_item_context">
          <p>{{item.name}}</p>
          <p>{{item.price}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            hotlist:[
                {
                    "id":1,
                    "imgurl":"https://imgs.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_250x250_0fc722c0.jpg",
                    "name":"故宫",
                    "price":"65",
                    "hot":"https://imgs.qunarzz.com/piao/fusion/1710/ab/159673b63e6ca702.png"
                },
                {
                    "id":2,
                    "imgurl":"https://imgs.qunarzz.com/sight/p0/1507/cc/19733fc0135062788140cbb48ae606a7.water.jpg_250x250_48713510.jpg",
                    "name":"北京野生动物园",
                    "price":"140",
                    "hot":"https://imgs.qunarzz.com/piao/fusion/1710/2d/36d0c4adaebbbc02.png"
                },
                {
                    "id":3,
                    "imgurl":"https://imgs.qunarzz.com/sight/p0/2007/5e/5e24b3e9082ce5bfa3.img.jpg_250x250_2383e5b0.jpg",
                    "name":"北京欢乐谷",
                    "price":"191",
                    "hot":"https://imgs.qunarzz.com/piao/fusion/1710/67/edc47ffef9e96b02.png"
                },
                {
                    "id":4,
                    "imgurl":"https://imgs.qunarzz.com/sight/p0/1505/f5/f5f45e1a83537bcb.water.jpg_250x250_63e3520a.jpg",
                    "name":"圆明园",
                    "price":"10"
                },
                {
                    "id":5,
                    "imgurl":"https://imgs.qunarzz.com/sight/p0/2005/30/307fa37039eab5cba3.water.jpg_250x250_d76001d5.jpg",
                    "name":"颐和园",
                    "price":"29"
                },
                {
                    "id":6,
                    "imgurl":"https://imgs.qunarzz.com/sight/p0/2005/39/3979f1867defec4ea3.water.jpg_250x250_e1b08a5e.jpg",
                    "name":"八达岭长城",
                    "price":"40"
                },
                {
                    "id":7,
                    "imgurl":"https://imgs.qunarzz.com/sight/p0/201311/12/3e2de7e7f2fa170fc8d65eac.jpg_250x250_94572c5c.jpg",
                    "name":"八达岭野生动物园",
                    "price":"78.5"
                },
                {
                    "id":8,
                    "imgurl":"https://imgs.qunarzz.com/sight/p0/2005/4a/4a2a2afc7a3ca8a6a3.water.jpg_250x250_60db863a.jpg",
                    "name":"古水北镇",
                    "price":"140"
                },
                {
                    "id":9,
                    "imgurl":"https://imgs.qunarzz.com/sight/p0/1609/7a/7ae8ee7831836095a3.water.jpg_250x250_95e31629.jpg",
                    "name":"金海湖风景区",
                    "price":"29.9"
                },
                {
                    "id":10,
                    "imgurl":"https://imgs.qunarzz.com/sight/p0/201308/08/41150dacc0e3a0c8c8d65eac.jpg_250x250_d76e727c.jpg",
                    "name":"北京动物园",
                    "price":"20.8"
                }
            ]
        }
    },
};
</script>

<style lang="stylus" scoped>
.xscroll_box 
  width: 100%;
  // height: 5rem;
  .xscroll_title {
    width: 90%;
    height: 1rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    line-height: 1rem;
    // background #fff
  }
  border-top: 0.2rem solid #cdcdcd;
  .sliding_box
    display flex
    overflow-y hidden
    overflow-x scroll
    border-bottom: 0.2rem solid #cdcdcd;
    .sliding_item
      // display: flex
      margin-left: 0.13rem
      
      flex-wrap wrap 
      flex-direction row
    .sliding_item_img
      width 2.2rem
      height 2.2rem
    // padding: .06rem 0 .2rem;
    .sliding_item_context
      text-align center
      font-size 0.24rem
</style>